<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { StrUtil } from '@xtail/core'
  import { Icon as IconOnline, IconifyIcon, getIcon } from '@iconify/vue'
  import { IconIconifyPropsType } from './types'

  defineOptions({
    name: 'SIconIconify'
  })

  const props = withDefaults(defineProps<IconIconifyPropsType>(), {
    icon: '',
    width: 24,
    height: 24
  })

  const iconData = ref<IconifyIcon | string>(props.icon)
  const iconDataPreHandler = () => {
    // 如果传入的图标为图标名称字符串
    if (StrUtil.isStr(props.icon)) {
      // 尝试从本地图标数据存储中获取图标数据
      iconData.value = getIcon(props.icon) || props.icon
    } else {
      iconData.value = props.icon
    }
  }
  watch(
    () => props.icon,
    () => iconDataPreHandler(),
    { immediate: true }
  )
</script>

<template>
  <IconOnline
    :id="id"
    class="s-icon-iconify"
    :class="className"
    :icon="iconData"
    :ssr="ssr"
    :mode="mode"
    :inline="inline"
    :width="width"
    :height="height"
    :color="color"
    :h-flip="hFlip"
    :v-flip="vFlip"
    :flip="flip"
    :rotate="rotate"
    :style="style"
    :on-load="onLoad"
    :customise="customise"
  />
</template>

<style lang="scss">
  @use './style' as *;
</style>
